<template>
  <div class="cabinet_error">
    <div class="cabinet_error_search">
      <elmeForm
        ref="listForm"
        :formData="formData"
        :formValue="formValue"
        :formButton="formButton"
      />
    </div>
    <div class="cabinet_error_content">
      <a-table
        :columns="columns"
        :pagination="pagination"
        :dataSource="dataList"
        :rowKey="record => record.roleId"
        :loading="tableLoading"
        @change="changeList"
      >
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="action('edit', record)">编辑</a-button>
          <a-button type="link" @click="action('delete', record)">删除</a-button>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
import elmeForm from "@/components/elme-form.vue";

export default {
  name: "cabinet_error",
  components: {
    elmeForm,
  },
  data() {
    return {
      formButton: {
        cancelFun: () => {
          this.pagination.current = 1;
          this.pagination.pageSize = 10;
        }, // 取消的回调
        confirmFun: () => {
          this.pagination.current = 1;
          this.pagination.pageSize = 10;
          this.getList()
        }, //确认的回调
        cancelText: "重置", //取消按钮的文字，默认为取消
        confirmText: "查询",
      },
      formValue: {
        input1: undefined,
        input2: undefined,
        input3: undefined,
        input4: undefined,
        input5: undefined,
        input6: undefined,
      },
      formData: [
        {
          type: "timeRegion",
          label: "告警时间",
          width: "25%",
          prop: "input1",
        },
        {
          type: "input",
          label: "机柜编号",
          width: "25%",
          prop: "input2",
        },
        {
          type: "input",
          label: "名称/地址",
          width: "25%",
          prop: "input3",
        },
        {
          type: "input",
          label: "所属代理商",
          width: "25%",
          prop: "input4",
        },
        {
          type: "input",
          label: "所属商家",
          width: "25%",
          prop: "input5",
        },
        {
          type: "select",
          label: "处理状态",
          width: "25%",
          prop: "input6",
          options: [
            {
              label: "待处理",
              value: 0,
            },
            {
              label: "已处理",
              value: 1,
            },
          ],
        },
      ],
      columns:[
        {
          title: "修改时间",
          align: "center",
          dataIndex: "updateTime"
        },
        {
          width: "250px",
          title: "操作",
          align: "center",
          dataIndex: "operation",
          scopedSlots: { customRender: "action" }
        }
      ],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条`
      },
      dataList:[],
      tableLoading:false
    };
  },
  created() {},
  mounted() {},
  methods: {
    changeList(e) {
      this.pagination.current = e.current;
      this.pagination.pageSize = e.pageSize;
      this.getList();
    },
    getList() {
      this.tableLoading = true
      this.$axios
        .get(this.$url.quoteList, {
          params: {
            pageNo: this.pagination.current,
            pageSize: this.pagination.pageSize,
            keyword: this.getValue(this.searchForm.keyword),
            quotationStatus: this.getValue(this.searchForm.quotationStatus)
          }
        })
        .then(res => {
          this.tableLoading = false
          if (!res.errorCode) {
            this.dataList = res.resultData.details;
            this.pagination.total = res.resultData.totalNum;
          }
        })
        .catch(err => {
          this.tableLoading = false
        });
    },
  },
};
</script>

<style lang="less" scoped>
.cabinet_error {
  height: 100%;
  width: 100%;
  .cabinet_error_search {
    background: #ffffff;
    padding-top: 24px;
  }
  .cabinet_error_content {
    background: #ffffff;
    padding: 20px;
    margin-top: 20px;
  }
}
</style>
